<template>
	<view>
		<view class="paint-room-info d_f_c">
			<view class="info-item">
				<text>店名称：{{store.storeName}}</text>
			</view>
			<view class="info-item d_f_c">
				<text>当前店前缀：{{store.prefixNumber}}</text>
				<text>店登录号：{{store.storeNumber}}</text>
			</view>
			<view class="info-item d_f_r">
				<text>新编号：</text>
				<input v-model="storeNumber" type="number" maxlength="6" placeholder="请输入6位数字编号" />
			</view>
		</view>
		<button class="SN_btn" @click='updateStoreNumber'>确认修改</button>
		<view>
			<text class="tips_1">备注：</text>
			<text class="tips_2">店前缀无法修改，只能更改后面的编码，只能输入数字!如: xmg123456，后面数字123456可以设置，前缀xmg无法变更。</text>
		</view>
	</view>
</template>

<script>
	import { getStoreInfo, setStoreInfo } from '@/request/api/store.js'
	export default {
		name: 'setNumber',
		data(){
			return {
				store: {},
				storeNumber:'',
			}
		},
		onShow() {
			this.getStore()
		},
		methods: {
			getStore(){
				getStoreInfo().then((res)=>{
					this.store = res.data
					let store = this.store
					this.storeNumber = store.storeNumber.substring(store.prefixNumber.length,store.storeNumber.length)
				})
			},
			updateStoreNumber(){
				let params = {
					prefixNumber: this.store.prefixNumber,
					storeNumber: this.storeNumber
				}
				setStoreInfo(params).then((res)=>{
					if(res.code==0){
						this.getStore()
						uni.showToast({
							title: '修改成功',
							duration: 1000
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.paint-room-info {
		height: 152px;
		background: #fff;
		padding: 0 30px;
	}
	.paint-room-info .info-item {
	    display: flex;
	    padding: 11px 0;
	    border-bottom: .5px solid #eee;
	}
	.d_f_c{
		display: flex;
		flex-direction:column;
	}
	.d_f_r{
		display: flex;
		flex-direction:row;
	}
	.paint-room-info .info-item text{
	    display: inline-block;
	    font-size: 15px;
	    font-weight: 400;
	    color: #333;
	    line-height: 20px;
	    white-space: nowrap;
    }
	.SN_btn {
	    margin: 15px 10px;
	    height: 46px;
	    background-color: #2c7fd9;
	    font-size: 18px;
	    font-weight: 400;
	    color: #fff;
	    line-height: 27px;
	    border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tips_1{
		margin: 10px 15px 0 15px;
		font-size: 18px;
		font-weight: 400;
		color: #666;
		line-height: 30px;
		display: block;
	}
	.tips_2{
		margin: 15px 15px;
	    font-size: 13px;
	    font-weight: 400;
	    color: #666;
	    line-height: 18px;
		padding-top: 10px;
	}
	


</style>